.container {
  display: flex;
  flex-direction: column;
}
.presets {
  display: flex;
  flex-direction: column;

  &__item {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
    padding: 0 12px;
    height: var(--list-item-height);

    &:hover {
      background-color: var(--vscode-list-hoverBackground);

      .presets__item__right {
        display: flex;
      }
    }

    &--separator {
      height: var(--list-item-height);

      .presets__item__left {
        flex: 1;
        &::after {
          content: '';
          flex: 1;
          height: 1px;
          background: linear-gradient(
            to right,
            var(--cwc-border-color-dimmed),
            transparent
          );
        }
      }
    }

    &--highlighted {
      background-color: var(--vscode-list-inactiveSelectionBackground);
    }

    &__left {
      display: flex;
      align-items: center;
      height: 100%;
      gap: 6px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      position: relative;

      &__drag_handle {
        display: flex;
        align-items: center;
        height: 100%;
        cursor: grab;
        opacity: 0.5;

        &:active {
          cursor: grabbing;
        }

        &--disabled {
          opacity: 0.3;
          cursor: auto;
        }
      }

      &__icon {
        display: flex;

        > svg {
          fill: var(--vscode-icon-foreground);
          width: 16px;
          height: 16px;
        }
      }

      &__collapse-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 15px;
      }

      &__text {
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.2;

        > span:nth-child(2) {
          color: var(--vscode-descriptionForeground);
          margin-left: 0.5em;
          font-size: 0.9em;
        }
      }
    }

    &__right {
      display: none;
      align-items: center;
      cursor: default;
    }
  }
}

.footer {
  display: flex;
  padding: 8px 12px 12px 12px;

  > button {
    flex: 1;
  }
}
